import React, { useState, useEffect } from 'react'
import './Css/Order.css'

import { UserOutlined } from '@ant-design/icons';


import { Button, Form, Input, Select, Space, DatePicker } from 'antd';

const { Option } = Select;
const { RangePicker } = DatePicker;


import { getorder } from '../../../../request/api'


export default function Title(props) {
  useEffect(() => {
    allorder()
  }, [])

  const { name, getTitle } = props
  let [phone, setphone] = useState('')
  let [_id, set_id] = useState('')
  let [consignee, setconsignee] = useState('')
  let [Place_an_order_person, setPlace_an_order_person] = useState('')
  let [Order_status, setOrder_status] = useState('请选择订单状态')


  // 重置搜索
  const onFinish = async() => {
    setphone('')
    set_id('')
    setconsignee('')
    setPlace_an_order_person('')
    setOrder_status('请选择订单状态')
    const data: any = await getorder({})
    getTitle(data.data)
  }

  const allorder: any = async () => {
    let from = {
      phone,
      _id,
      consignee,
      Place_an_order_person,
      Order_status
    }
    const data: any = await getorder({ from })
    getTitle(data.data)
  }

  return (
    <div>
      <div className='Title'>
        <Input size="large" placeholder="请输入手机号" prefix='手机号：' value={phone} onChange={(e) => {
          setphone(e.target.value)
        }} className='user' />
        <Input size="large" placeholder="请输入订单号" prefix='订单号：' value={_id} onChange={(e) => {
          set_id(e.target.value)
        }} className='user' />
        <Input size="large" placeholder="请输入收货人名称" prefix='收获人：' value={consignee} onChange={(e) => {
          setconsignee(e.target.value)
        }} className='user' />
        <Input size="large" placeholder="请输入下单人名称" prefix='姓名：' value={Place_an_order_person} onChange={(e) => {
          setPlace_an_order_person(e.target.value)
        }} className='user' />
        <Select
          value={Order_status}
          onChange={(e) => { setOrder_status(e) }}
          className='Select'
          placeholder="请选择订单状态"
          allowClear
        >
          <Option value="待付款">待付款</Option>
          <Option value="已付款">已付款</Option>
          <Option value="代发货">代发货</Option>
          <Option value="已发货">已发货</Option>
          <Option value="派送中">派送中</Option>
          <Option value="已入库">已入库</Option>
          <Option value="待取件">待取件</Option>
          <Option value="已完成">已完成</Option>
          <Option value="已取消">已取消</Option>
          <Option value="退款中">退款中</Option>
          <Option value="已退款">已退款</Option>
        </Select>

        <Select
          className='Select'
          placeholder="所属团长"
          allowClear
        >
          <Option value="male">male</Option>
          <Option value="female">female</Option>
          <Option value="other">other</Option>
        </Select>
        
        <RangePicker showTime className='ShowTime' onChange={(e) => {
          console.log(e);
        }} />
        <div >
          <Button size="large" onClick={() => {
            onFinish()
          }}>重置</Button>
          <Button size="large" onClick={() => {
            allorder()
          }
          } >检索</Button>
          <Button size="large" style={{ color: 'red', border: '1px solid red'}}>导出</Button>

        </div>
      </div>
    </div>
  )
}
